<template>
	<el-card class="mod__menu">
		<el-form v-if="_showform" :inline="true">
			<el-form-item label="">
				<el-input v-model="state.queryForm.name" placeholder="栏目名称" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="default" @click="getDataList()">查询</el-button>
				<el-button type="primary" @click="addOrUpdateHandle()">新增栏目</el-button>
			</el-form-item>
		</el-form>
		<el-table
			@row-click="handleSelectOne"
			:data="state?.dataList"
			style="width: 100%"
			row-key="id"
			lazy
			stripe
			border
			:load="load"
			:tree-props="{ children: 'children', hasChildren: 'id' }"
		>
			<el-table-column type="index" label="序号" width="65" align="center"></el-table-column>
			<el-table-column prop="id" label="栏目id" width="165" align="center"></el-table-column>
			<el-table-column prop="columnName" label="栏目名称" align="center"></el-table-column>
			<el-table-column prop="createDate" label="创建时间" align="center"></el-table-column>
			<el-table-column prop="" label="操作" header-align="center" align="center">
				<template #default="scope">
					<el-button type="primary" @click="addOrUpdateHandle(scope.row.id, '新增')">新增</el-button>
					<el-button type="" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
					<el-button type="danger" @click="delColumn(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<br/>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
		<add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
	</el-card>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import store from '@/store'
import { useCrud } from '@/hooks'
import { IHooksOptions } from '@/hooks/interface'
import AddOrUpdate from './column-add-or-update.vue'
import { getColumnListApi, delColumnApi } from '@/api/cms/column'
import { ElMessage } from 'element-plus/es'
const emit = defineEmits(['getColumId'])

const props = defineProps({
	showform: {
		type: Boolean,
		required: true
	}
})
interface User {
	id: number
	ipi: number
	ips: number
	name: string
	parentId: string
	hasChildren?: boolean
	children?: User[]
}
const state: IHooksOptions = reactive({
	dataListUrl: 'api/cms/column/details/list',
	deleteUrl: 'cms/column/delete',
	queryForm: {
		name: '',
		parentId: '0' // 关键词
	},
	isPage: true
})
const _showform = ref(true)
_showform.value = props.showform == 'fromArticle' ? false : true

onMounted(() => {
	// getDataList()
})
const getDataList = () => {
	getColumnListApi({
		ipi: state.ipi,
		ips: state.ips,
		parentId: state.queryForm.parentId
	}).then(res => {
		console.log(res)
		state.dataList = res.data.result
	})
}

// 加载子集
const load = (row: User, treeNode: unknown, resolve: (date: User[]) => void) => {
	let params = {
		ipi: 1,
		ips: 100,
		name: '',
		parentId: row.id
	}
	getColumnListApi(params).then(res => {
		resolve(res.data.result)
	})
}

// 删除
const delColumn = id => {
	delColumnApi(id).then(res => {
		getDataList()
		ElMessage.success('删除成功')
	})
}

const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: string, type: string) => {
	addOrUpdateRef.value.init(id, type)
}

const handleSelectOne = (val, index) => {
	emit('getColumId', val)
}
const {  selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)
</script>

<style lang="scss" scoped>
iframe {
	width: 100%;
	height: calc(100vh - 90px - 34px);
}
</style>
